<template>
  <div>
<!--    <el-form label-width="80px">-->
<!--      <el-row>-->
<!--        <el-col :span="10">-->
<!--          <el-form-item label="当前地点">-->
<!--            <el-input-->
<!--                size="small"-->
<!--                type="text"-->
<!--                readonly-->
<!--                v-model="addressInfo.address"-->
<!--            />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="7">-->
<!--          <el-form-item label="位置经度">-->
<!--            <el-input-->
<!--                size="small"-->
<!--                type="text"-->
<!--                v-model="addressInfo.longitude"-->
<!--                readonly-->
<!--            />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="7">-->
<!--          <el-form-item label="位置纬度">-->
<!--            <el-input-->
<!--                size="small"-->
<!--                type="text"-->
<!--                v-model="addressInfo.latitude"-->
<!--                readonly-->
<!--            />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </el-form>-->

    <baidu-map
        class="bm-view"
        :center="{ lng: 116.404, lat: 39.915 }"
        :zoom="15"

    >
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
    </baidu-map>

<!--    &lt;!&ndash; 定位按钮 &ndash;&gt;-->
<!--    <button @click="getLocation">获取当前定位</button>-->

<!--    &lt;!&ndash; 搜索输入框 &ndash;&gt;-->
<!--    <input-->
<!--        type="text"-->
<!--        v-model="searchQuery"-->
<!--        placeholder="请输入地址进行搜索"-->
<!--        @keydown.enter="searchLocation"-->
<!--    />-->
<!--    <button @click="searchLocation">搜索</button>-->
  </div>
</template>

<script setup>
import { ref,reactive, onMounted } from 'vue';

const data = reactive({
  currentCity:''
})

const searchQuery = ref(''); // 搜索的地址
const mapRef = ref(null);
// 监听地图加载完成
// function onMapReady({BMap}) {
//
//   const geolocation = new BMap.Geolocation();
//
//   geolocation.getCurrentPosition(
//       async (result) => {
//         console.log(result);
//         if (geolocation.getStatus() === 0) {
//           const city = result.address.city;
//           data.currentCity = city;
//         } else {
//           data.currentCity = '定位失败';
//         }
//       },
//       (error) => {
//         console.error('定位失败', error); // 这里输出错误信息
//       },
//       { enableHighAccuracy: true }
//   );
// };


// // 获取当前位置
// const getLocation = () => {
//   const geolocation = new BMap.Geolocation();
//   geolocation.getCurrentPosition((r) => {
//     console.log(r)
//     if (r.getStatus() === BMAP_STATUS_SUCCESS) {
//       data.lng = r.point.lng;
//       data.lat = r.point.lat;
//       data.currentCity = r.address.city; // 获取城市名称
//     } else {
//       console.error('定位失败: ' + this.getStatus());
//     }
//   });
// };
//
// const searchLocation = () => {
//   const localSearch = new BMap.LocalSearch(mapRef.value, {
//     renderOptions: { map: mapRef.value }
//   });
//   localSearch.search(searchQuery.value); // 使用输入的地址进行搜索
// };

// 在 Vue 组件挂载时检查地图
onMounted(() => {
  // getLocation(); // 初次加载时获取定位
});
</script>

<style scoped>
.bm-view {
  width: 100%;
  height: 80vh;
}
</style>
